<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            width: 400px;
            height: 400px;
            background: red;
            opacity: 1;
        }

        /*显示变为隐藏时的过渡*/
        /*.damu-leave{opacity:1;background: green;}*/
        .damu-leave-active{transition:5s linear;}
        .damu-leave-to{opacity:0;background: green}

        /*隐藏变为显示时的过渡*/
        .damu-enter{opacity: 0;background: green;}
        .damu-enter-active{transition:5s linear;}
        .damu-enter-to{opacity: 1;background: red;}



    </style>
</head>
<body>
    <div id="app">
        <button @click="flag=!flag">click</button>
        <transition name="damu">
            <div class="test" v-if="flag"></div>
        </transition>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>

    // 1. vue是支持过渡动画的!!  它会帮我们给指定的节点加一系列的class
    //     a.当前这个节点需要被transition组件包裹
    //     b.当前这个节点必须拥有过渡
    //     c. 当前这个节点需要使用上v-show v-if指令

    //   当一个元素从显示变为隐藏状态时 vue在上述条件(a,b)成立的情况下会给当前元素加上3个class
    //         v-leave
    //         v-leave-active
    //         v-leave-to

    //   当一个元素从隐藏变为显示状态时 vue在上述条件(a,b)成立的情况下会给当前元素加上3个class
    //         v-enter
    //         v-enter-active
    //         v-enter-to

    Vue.config.productionTip = false;

    new Vue({
        el:"#app",
        data(){
            return {
                flag:true
            }
        }
    })
</script>
</html>